<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
    <script src="https://unpkg.com/vue-simple-uploader/dist/vue-uploader.js"></script>
</head>
<body>
<div id="app">
    <div style="text-align:center">
        <uploader :options="options" @file-success="fileSuccess">
            <uploader-unsupport></uploader-unsupport>
            <uploader-drop>
                <p>Drop files here to upload or</p>
                <uploader-btn>select files</uploader-btn>
                <uploader-btn :attrs="attrs">select images</uploader-btn>
                <uploader-btn :directory="true">select folder</uploader-btn>
            </uploader-drop>
            <uploader-list></uploader-list>
        </uploader>
    </div>
</div>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            options: {
                // https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#配置
                target: 'http://127.0.0.1:80/upload',
                testChunks: false, // 上传前判断块是否已经存在
                simultaneousUploads: 5, // 并发数
                chunkSize: 9999 * 1024 * 1024 // 块大小
            },
            attrs: {
                accept: 'image/*'
            }
        },
        methods: {
            fileSuccess(rootFile, file, message, chunk) {
                console.info('fileSuccess arguments', arguments);
                // https://www.runoob.com/vue2/vuejs-ajax-axios.html
                axios.get('http://127.0.0.1:80/merge', {
                    params: {
                        'filename': file.name,
                        'guid': arguments[0].uniqueIdentifier
                    }
                }).then(function (response) {
                    console.info(response);
                }).catch(function (error) {
                    console.error(error);
                });
            }
        }
    });
</script>
</body>
</html>
